<template>
	<div>
		<hot-table :data="hotSettings.data" licenseKey="non-commercial-and-evaluation">
			<hot-column title="First column header">
			</hot-column>
			<hot-column :settings="secondColumnSettings" read-only="true">
			</hot-column>
		</hot-table>
	</div>
</template>

<script>
	import {
		HotTable,
		HotColumn
	} from '@handsontable/vue';
	import Handsontable from 'handsontable';

	export default {
		name: 'HelloWorld',
		data() {
			return {
				hotSettings: {
					data: Handsontable.helper.createSpreadsheetData(6, 10),
					colHeaders: true,
					dropdownMenu: true,
				},
				secondColumnSettings: {
					title: 'Second column header'
				}
			}
		},
		components: {
			HotTable,HotColumn
		}

	}
</script>
